  <div nz-row [nzGutter]="24" class="bgcolor">
    <div nz-col nzXs="24" nzSm="12" nzMd="12" nzLg="6">
      <g2-card [title]="'本月M1账户数'" total="{{M1Numbe}}" [action]="action1" [footer]="footer1">
        <ng-template #action1>
          <nz-tooltip [nzTitle]="'指标说明'">
            <i nz-tooltip nz-icon type="info-circle"></i>
          </nz-tooltip>
        </ng-template>
        <trend flag="{{M1DataUp}}" style="display:block; margin-top:5px;">
          日同比
          <span class="pl-sm">{{M1Data}}%</span>
        </trend>
        <trend flag="{{M1WeekUp}}" style="display:block; margin-top:2px;">
          周同比
          <span class="pl-sm">{{M1Week}}%</span>
        </trend>
        <ng-template #footer1>
          <div class="d-flex justify-content-between text-truncate">
            <trend flag="{{M1MonthUp}}">
              月同比
              <span class="pl-sm">{{M1Month}}%</span>
            </trend>
          </div>
        </ng-template>
      </g2-card>
    </div>

    <div nz-col nzXs="24" nzSm="12" nzMd="12" nzLg="6">
      <g2-card [title]="'本月M2账户数'" total="{{M2Numbe}}" [action]="action2" [footer]="footer2">
        <ng-template #action2>
          <nz-tooltip [nzTitle]="'指标说明'">
            <i nz-tooltip nz-icon type="info-circle"></i>
          </nz-tooltip>
        </ng-template>
        <trend flag="{{M2DataUp}}" style="display:block; margin-top:5px;">
          日同比
          <span class="pl-sm">{{M2Data}}%</span>
        </trend>
        <trend flag="{{M2WeekUp}}" style="display:block; margin-top:2px;">
          周同比
          <span class="pl-sm">{{M2Week}}%</span>
        </trend>
        <ng-template #footer2>
          <div class="d-flex justify-content-between text-truncate">
            <trend flag="{{M2MonthUp}}">
              月同比
              <span class="pl-sm">{{M2Month}}%</span>
            </trend>
          </div>
        </ng-template>
      </g2-card>
    </div>
    <div nz-col nzXs="24" nzSm="12" nzMd="12" nzLg="6">
      <g2-card [title]="'本月M3账户数'" total="126,560" [action]="action3" [footer]="footer3">
        <ng-template #action3>
          <nz-tooltip [nzTitle]="'指标说明'">
            <i nz-tooltip nz-icon type="info-circle"></i>
          </nz-tooltip>
        </ng-template>
        <trend flag="down" style="display:block; margin-top:5px;">
          日同比
          <span class="pl-sm">11%</span>
        </trend>
        <trend flag="up" style="display:block; margin-top:2px;">
          周同比
          <span class="pl-sm">12%</span>
        </trend>
        <ng-template #footer3>
          <div class="d-flex justify-content-between text-truncate">
            <trend flag="up">
              月同比
              <span class="pl-sm">12%</span>
            </trend>
          </div>
        </ng-template>
      </g2-card>
    </div>
    <div nz-col nzXs="24" nzSm="12" nzMd="12" nzLg="6">
      <g2-card [title]="'本月M4账户数'" total="126,560" [action]="action4" [footer]="footer4">
        <ng-template #action4>
          <nz-tooltip [nzTitle]="'指标说明'">
            <i nz-tooltip nz-icon type="info-circle"></i>
          </nz-tooltip>
        </ng-template>
        <trend flag="down" style="display:block; margin-top:5px;">
          日同比
          <span class="pl-sm">11%</span>
        </trend>
        <trend flag="up" style="display:block; margin-top:2px;">
          周同比
          <span class="pl-sm">12%</span>
        </trend>
        <ng-template #footer4>
          <div class="d-flex justify-content-between text-truncate">
            <trend flag="up">
              月同比
              <span class="pl-sm">12%</span>
            </trend>
          </div>
        </ng-template>
      </g2-card>
    </div>
  </div>

  <div nz-row [nzGutter]="24">
    <div nz-col nzLg="24" nzXl="10">
      <div class="yjcolor d-flex">
        <div class="l">
          <h3 class="t">本日逾期客户数</h3>
          <p class="b">{{todatOverdue}}件</p>
        </div>
        <div class="c"><g2-pie [data]="salesPieData" height="100"></g2-pie></div>
        <div class="r">
          <trend flag="down" style="display:block;">广东省<span class="pl-sm">11%</span></trend>
          <trend flag="down" style="display:block;">福建省<span class="pl-sm">11%</span></trend>
          <trend flag="down" style="display:block;">浙江省<span class="pl-sm">11%</span></trend>
          <trend flag="down" style="display:block;">江苏省<span class="pl-sm">11%</span></trend>
        </div>
      </div>
    </div>
    <div nz-col nzLg="24" nzXl="7">
      <div class="yjcolor">
        <h3 class="t">本日风险监测预警事件</h3>
        <p class="b mt34">{{todayRisk}}件</p>
      </div>
    </div>
    <div nz-col nzLg="24" nzXl="7">
      <div class="yjcolor">
        <h3 class="t">本日GPS报警数</h3>
        <p class="b mt34">{{todayGps}}起</p>
      </div>
    </div>
  </div>

  <div nz-row [nzGutter]="24">
    <div nz-col nzLg="24" nzXl="10">
      <nz-card [nzBordered]="false" nzTitle="高风险客户预警名单" [nzExtra]="extraTemplate">
        <div nz-row class="p5" *ngFor="let item of highRiskList">
          <div nz-col nzSpan="5" class="text-truncate">{{item.name}}</div>
          <div nz-col nzSpan="11" class="text-truncate">贷款金额:{{item.amount}}元</div>
          <div nz-col nzSpan="8" class="textright text-truncate">风险等级:{{item.riskLevel}}</div>
        </div>
      </nz-card>
      <ng-template #extraTemplate>
        <a>查看全部</a>
      </ng-template>
    </div>
    <div nz-col nzLg="24" nzXl="7">
      <nz-card [nzBordered]="false" nzTitle="借款人预警" [nzExtra]="extraTemplate">
        <div nz-row class="p5" *ngFor="let item of borrowerList">
          <div nz-col nzSpan="7" class="text-truncate">{{item.name}}</div>
          <div nz-col nzSpan="9" class="text-truncate">{{item.state}}</div>
          <div nz-col nzSpan="8" class="textright text-truncate">{{item.date}}</div>
        </div>
      </nz-card>
      <ng-template #extraTemplate>
        <a>查看全部</a>
      </ng-template>
    </div>
    <div nz-col nzLg="24" nzXl="7">
      <nz-card [nzBordered]="false" nzTitle="GPS报警" [nzExtra]="extraTemplate">
        <div nz-row class="p5" *ngFor="let item of gpsList">
          <div nz-col nzSpan="8" class="text-truncate">{{item.title}}</div>
          <div nz-col nzSpan="8" class="text-truncate">{{item.state}}</div>
          <div nz-col nzSpan="8" class="textright text-truncate">{{item.date}}</div>
        </div>
      </nz-card>
      <ng-template #extraTemplate>
        <a>查看全部</a>
      </ng-template>
    </div>
  </div>

